<template>
    <div class="activity">
            <div class="img_module">
                <img :src="infor.image" class="module_pic"  @click="showCard"/>
                <div   v-for="(item,index) in infor.content" :key="index"  :class="item.length>1?'act_img':'acts_img'">
                    <img  v-for="(items,indexs) in item" :key="indexs" :src="items.image" class="module_pic"  @click="showCard">
                </div>
                <img :src="infor.image_title" class="module_pic" />
            </div>
            <div class="cont_list" v-if="infor.show_goods==1" :style="{background:infor.color}">
                <div class="goods_list">
                    <div class="info" v-for="(item,index) in goods" :key="index"  @click="showCard">
                        <div class="info_img">
                            <img :src="item.ui_img" class="info_pic">
                            <div class="act_exp" v-if="item.intro_tag!=''">{{item.intro_tag}}</div>
                        </div>
                        <div class="info_cont">
                            <div class="info_tit">{{item.name}}</div>
                            <div class="info_vice">{{item.sell_point}}</div>
                            <div class="info_type" v-if="item.reduce_price>0">
                                <div class="info_reduce">{{item.reduce_discount}}折</div>
                                <div class="info_reduce">省¥{{item.reduce_price}}</div>
                            </div>
                            <div :class="item.reduce_price>0?'prices':'price'">
                                <div class="all_price">
                                    <div class="price_now"><span class="sign">¥</span>{{item.price}}</div>
                                    <div class="sale" v-if="item.line_price!=0">¥{{item.line_price}}</div>
                                </div>    
                                <div class="cart_icon"><img src="/static/images/gwc-go.png" class="cart_pic"></div>    
                            </div>
                        </div>                           
                    </div>     
                </div>
                <div v-if="load" class="loader">正在加载中...</div>  
                <div v-if="bottom" class="bottom">已经到底啦</div>  
            </div> 
            <!-- 过渡动画 -->
            <!-- <transition name="fade"> -->
                <div class="img-view" v-if="showlog" @click="toggleDialog">
                    <!-- 遮罩层 -->
                    <div class="img-layer"></div>
                    <div class="img">
                        <img src="https://xunjiangzhimei.oss-cn-hangzhou.aliyuncs.com/upload/image/20201113/57358bb0bae1466edc47c9a2d974cb6d10fe251a.png">
                    </div>
                </div>
            <!-- </transition>                        -->
    </div>   
</template>

<script>
export default {
    name: 'ActivityNew',
    data () {
        return {
            app:"",
            infor:"",
            goods:"",
            load:false,
            bottom:false,
            page:1,
            limit:16,
            id:0,
            token:"",
            shareInfo:[],
            spread_code:"",
            showlog:false,
        }
    },
    mounted() {
      this.appSource();
    },
    created(){
        window.back=this.back;
        var id=this.$route.query.id; 
        var that=this;
         that.id=id;
         if(this.$route.query.token){
            that.token=this.$route.query.token;
            that.getShare();    
            that.getWxCode();
        }else{
            that.token="";
        }
        if(this.$route.query.spread_code){
            this.spread_code=this.$route.query.spread_code;
        }else{
            this.spread_code="";
        }
        this.$axios.get('/v1/common/activityDetailV2',{
            params: {
                id: id,
            }
        }).then(res => {
            var data=res.data;
            if(data.code==200){
               this.infor=data.data;
               document.title=data.data.title;
               if(this.infor.color==""){
                   this.infor.color="#F8F8F8";
               }
            }else{
                 Toast(data.msg)
            }
        }, res => {
            console.log("error");
        }); 
        this.$axios.get('/mall/v1/common/goodsListV2',{
            params: {
                limit: 16,
                page:1,
            },
            headers:{
                'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                'Authorization':that.token,
            }
        }).then(res => {
            var result=res.data;
            if(result.code==200){
               this.goods=result.data;
               
               this.scroll(this.goods);
            }else{
                 Toast(result.msg)
            }
        }, res => {
            console.log("error");
        });        
          
    },
    methods: {
	    back(){
            if(this.app=="ios"){
                window.webkit.messageHandlers.RequestNative.postMessage(JSON.stringify({"code":"1001","data":{}}));
            }else{
                window.JSWEB.RequestNative(JSON.stringify({"code":1001,"data":{}}));
            }
        },
        appSource() {
            const u = navigator.userAgent;
            const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
            if (isiOS) {
                this.app="ios";
            } else {
                this.app="andriod";
            }
        },
        showCard(){
            let that=this;
            that.showlog=true;
        },
        toggleDialog(){
            this.showlog=false;
        },
        getShare(){
            let that=this;
            if(!that.token){
                
                if(this.app=="ios"){
                    window.webkit.messageHandlers.RequestNative.postMessage(JSON.stringify({"code":"1004","data":{}}));
                }else{
                    window.JSWEB.RequestNative(JSON.stringify({code:1004,data:{}}));
                }
                return false;
               
            }
            var params = new URLSearchParams();
            params.append('id',that.id); 
            that.$axios({
                url:'v1/common/getActivityShareDetail',
                method: 'post',
                data:params,
                headers:{
                    'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                    'Authorization':that.token,
                }
                })
                .then(function (res) {
                var res=res.data;
                if (res.code == "200") {
                   that.shareInfo=res.data;
                } else if(res.code == "10000"){
                    if(that.app=="ios"){
                        window.webkit.messageHandlers.RequestNative.postMessage(JSON.stringify({"code":"1004","data":{}}));
                    }else{
                        window.JSWEB.RequestNative(JSON.stringify({code:1004,data:{}}));
                    }
                }else {
                    Toast(res.msg);
                }
            }) 
        },
        getWxCode(){
          let that=this;
          var params = new URLSearchParams();     
           params.append('page_url',"packageA/pages/activity/activity?id=" + that.id +"&spread_code=" + that.spread_code +"&share=true");
          that.$axios({
              url:'mall/v1/share/getPageWxCode',
              method: 'post',
              data:params,
              headers:{
                  'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                  'Authorization':that.token,
              }
              })
              .then(function (res) {
              var res=res.data;
              if (res.code == "200") {
                  that.qr_code=res.data;
              } else if(res.code == "10000"){
                  if(that.app=="ios"){
                      window.webkit.messageHandlers.RequestNative.postMessage(JSON.stringify({"code":"1004","data":{}}));
                  }else{
                      window.JSWEB.RequestNative(JSON.stringify({code:1004,data:{}}));
                  }
              }else {
                  Toast(res.msg);
              }
          }) 
       },
        shareFrends(){
            let that=this;
            if(!that.token){  
                if(this.app=="ios"){
                    window.webkit.messageHandlers.RequestNative.postMessage(JSON.stringify({"code":"1004","data":{}}));
                }else{
                    window.JSWEB.RequestNative(JSON.stringify({code:1004,data:{}}));
                }
                return false;
               
            }
            if(this.app=="ios"){
                window.webkit.messageHandlers.RequestNative.postMessage(JSON.stringify({"code":"1010","data":{"qr_code":that.qr_code,"share_banner":that.shareInfo.share_banner,"title":that.shareInfo.share_title,"image":that.shareInfo.share_image,"path":"/packageA/pages/activity/activity?id="+that.id+"&spread_code="+that.spread_code}}));
            }else{
                window.JSWEB.RequestNative(JSON.stringify({code:1010,data:{qr_code:that.qr_code,share_banner:that.shareInfo.share_banner,title:that.shareInfo.share_title,image:that.shareInfo.share_image,path:"/packageA/pages/activity/activity?id="+that.id+"&spread_code="+that.spread_code}}));
            }
        },
        goTo(e,f,g){
            let that=this;
            if(that.app=="ios"){
                window.webkit.messageHandlers.RequestNative.postMessage(JSON.stringify({"code":"1007","data":{"type":e,"id":f,"title":g}}));
            }else{
                window.JSWEB.RequestNative(JSON.stringify({code:1007,data:{type:e,id:f,title:g}}));
            }    
        },
        goNews(e){
            if(this.app=="ios"){
                window.webkit.messageHandlers.RequestNative.postMessage(JSON.stringify({"code":"4","data":{"id":e}}));
            }else{
                window.JSWEB.RequestNative(JSON.stringify({"code":4,"data":{"id":e}}));
            }
        },
        goDetail(e){
            if(this.app=="ios"){
                window.webkit.messageHandlers.RequestNative.postMessage(JSON.stringify({"code":1008,"data":{"id":e}}));
            }else{
                window.JSWEB.RequestNative(JSON.stringify({"code":1008,"data":{"id":e}}));
            }            
        },
        activity(e,f,g,h){
            if(this.app=="ios"){
                window.webkit.messageHandlers.RequestNative.postMessage(JSON.stringify({"code":"9","data":{"type":e,"other_id":f,"name":h,link:"g"}}));
            }else{
                window.JSWEB.RequestNative(JSON.stringify({"code":9,"data":{"type":e,"other_id":f,"name":h,link:"g"}}));
            }            
        },
        scroll(goods) {
            let flag = false;
            window.onscroll = () => {
            let bottomOfWindow = document.documentElement.offsetHeight - document.body.scrollTop - window.innerHeight <=100 || document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <=100;
            if(bottomOfWindow&&flag==false){
                flag=true;
                this.page++;
                    var that = this;
                    that.load=true;
                    var params = {
                            page: this.page,
                            limit:20,
                    }
                    this.$axios.get( //传参发起请求
                        '/mall/v1/common/goodsListV2', {
                           params,
                           headers:{
                                'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                                'Authorization':that.token,
                            }
                        }
                    ).then(function (response) { //接口返回数据
                    var data=response.data.data;
                        if(data.length<=0){
                            that.bottom=true;
                            that.load=false;
                        }else{
                            for(var i =0;i<data.length;i++){
                                goods.push(data[i]);
                            };
                            that.load=false;
                            flag=false;
                        }

                    }, response => {
                        console.log("error");
                    });
                }
            }
        }
    },   
}
</script>
<style scoped>
.img_module{position:relative;}
.img_module img{width:100%;display:block;} 
.goods_list{width:702px;margin:0 auto;padding-bottom:40px;padding-top:20px;display: flex;justify-content:space-between;flex-wrap: wrap;}
.info{width:342px;background:#FFF;border-radius:8px;overflow:hidden;padding-bottom:32px;margin-bottom:18px;-webkit-column-break-inside:avoid;position: relative;}
.info_img{width:342px;height:342px;position: relative;}
.info_pic{width:342px;height:342px;}
.info_cont{width:302px;margin:0 auto;padding-top:20px;}
.info_tit{font-size:28px;color:#333334;font-weight:bold;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;white-space: normal !important;-webkit-line-clamp: 1;-webkit-box-orient: vertical;width:100%;height:40px;}
.info_vice{font-size:24px;color:#9B9B9B;margin-top:6px;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;white-space: normal !important;-webkit-line-clamp: 1;-webkit-box-orient: vertical;height:36px;}
.info_type{display:flex;justify-content:flex-start;margin-top:12px;}
.info_type div{margin-right:6px;}
.info_type div:last-child{margin-right:0px; }
.info_reduce{border-radius:36px;line-height:34px;text-align:center;font-size:22px;color:#DD0842;padding:0 16px;position: relative;}
.info_reduce::after {
display: flex;
box-sizing: border-box;
align-items: center;
content:'';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
transform: scale(0.5);
transform-origin: 0 0;
border: 2px solid #DD0842;
border-radius: 36px;
pointer-events: none;
}
.info_member{width:88px;height:30px;line-height:30px;font-size:18px;color:#FFF9C6;background: #333334;border-radius:30px;text-align: center;}
.info_genre{width:88px;height:30px;line-height:30px;font-size:18px;color:#FFF;background: #E74D3E;text-align: center;}
.info_award{padding:0 10px;line-height:30px;font-size:20px;color:#FFFFFF;background: #E74D3E;text-align: center;font-weight: bold;}
.all_price{display: flex;justify-content: flex-start;align-items: center;}
.price{display:flex;justify-content:space-between;margin-top:54px;align-items: center;}
.prices{display:flex;justify-content:space-between;margin-top:8px;align-items: center;}
.sale{font-size:24px;color:#9B9B9B;margin-left:4px;text-decoration:line-through;}
.price_now{font-size:32px;color:#4A4A4A;font-weight:bold;}
.price_now .sign{font-size:24px;}
.act_exp{line-height: 46px;background: rgba(181,148,104,1);border-radius: 32px 0px 0px 0px;padding: 0 28px;font-size: 26px;color: #FFFFFF;position: absolute;right: 0;bottom: 0;}
.cont_list{width:100%}
.share{width:100px;height:100px;position:fixed;right:12px;z-index: 999;top:16px;}
.share_pic{width:100px;height:100px;}
.loader{font-size:24px;line-height:80px;text-align: center;width:100%;}
.bottom{font-size:24px;line-height:80px;text-align: center;width:100%;}
.act_img{width:100%;display:flex;justify-content:space-between;align-items: center;}
.act_img img{width:50%;}
.acts_img{width:100%;}
.cart_icon{margin-left:auto;}
.cart_icon,.cart_pic{width:46px;height:46px;}
/*动画*/
.fade-enter-active,
.fade-leave-active {
    transition: all .2s linear;
    transform: translate3D(0, 0, 0);
}

.fade-enter,
.fade-leave-active {
    transform: translate3D(100%, 0, 0);
}


/* bigimg */

.img-view {
    position: relative;
    width: 100%;
    height: 100%;
}

/*遮罩层样式*/
.img-view .img-layer {
    position: fixed;
    z-index: 99999999;
    top: 0;
    left: 0;
    background: #000;
    opacity:0.4;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.img-view .img{
    max-width:100%;
    position: absolute;
    left: 0;
    right: 0;
    top:0;
    bottom:0;
    margin: auto;
    z-index: 199999999;
}
/*不限制图片大小，实现居中*/
.img-view .img img {
    max-width: 100%;
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top:0;
    bottom:0;
    margin: auto;
    z-index: 199999999;
}
</style>

